<template>
    <!-- @load 这是一个加载的函数, 
        每当拉倒页面底部
        需要翻页的时候就会被执行 -->
    <!-- 这个例子当中, 只是用定时器模拟数据的获取, 直接将数字加载数组后面 -->

    <!-- v-model 是是否正在加载的变量
    因为, 触发 load 的条件在于页面处于底部, 因为数据的获取有一定演示
    所以有一段时间页面是固定在底部, 这个时候其实是正在等待数据的返回, 
    那么就不应该不断重复发出请求, 所以有这个变量, 每当 @load 事件被触发,
    组件会自动把这个值变为 true 于是即使处在页面底部也不会再次进行加载
    然后数据获取完毕以后, 在 load 函数里面重新将这个值设为 false 证明读取完毕
    这个加载函数才能够再次执行-->

    <!-- finished 这是当前页面是否已经全部加载完毕所有数据的标志
    我们知道, 只要 v-model 为 false 而且页面处在底部, 就会触发 load 
    问题在于数据库是有限的, 不可能无限量地翻页, 如果发现页面已经到底, 
    要给伊戈尔标识, finished == true 就会完全禁止掉继续的翻页,
    即使下次 v-model 为 false 而且 页面处在底部也不会触发 load
    vomdel:是否正在加载的变量
    finished:  数据加载完的标志
    @load:   是每当页面处于底部时执行的函数
    -->
    <van-list 
        v-model="loading" 
        :finished="finished" 
        finished-text="没有更多了" 
        @load="onLoad">
        <van-cell v-for="item in list" :key="item" :title="item" />
    </van-list>
</template>

<script>
export default {
    data() {
        return {
            // 这个list 是一个数字数组
            // [1,2,3,4,5,6,7                                                                                                                                   ,n         ]
            list: [],
            loading: false,
            finished: false,
        };
    },
    methods: {
        onLoad() {
            // 异步更新数据
            // setTimeout 仅做示例，真实场景中一般为 ajax 请求
            setTimeout(() => {
                // 这里是模拟获取数据的过程
                for (let i = 0; i < 10; i++) {
                    this.list.push(this.list.length + 1);
                }

                // 加载完数据手动将 loading 设为 false
                // 才能让这个翻页加载再次出发
                this.loading = false;

                // 假设数据只有四十条, 这里模拟数据已经完全加载完毕
                // 就要将 finished 变为 true 阻止以后的翻页

                // 之前在大事件翻页时, 当前页码 currentPage
                // 还有每次获取多少条数据 perPage
                // 对于翻页来说, 什么时候算是翻到底
                // 是当前获取的数据条数, 小于我们设定的每页条数
                if (this.list.length >= 40) {
                    this.finished = true;
                }
            }, 1000);
        },
    },
};
</script>

<style>
</style>